<template>
  <!-- 管控排查 -->
  <view class="controlCheck-container">
    <u-navbar placeholder autoBack>
      <view slot="center" style="width: 70vw">
        <TopBar :tabBars="tabBars" :tabIndex="tabIndex" @change="onTabChange" backgroundColor="#fff"></TopBar>
      </view>
      <view slot="right">
        <i v-if="tabIndex === 1" class="iconfont icon-shaixuan" style="font-size: 40rpx" @click="handleNavigationBarButtonTap()" />
      </view>
    </u-navbar>

    <component v-bind:is="currentTabComponent" :data="listData" v-if="listData.length > 0"></component>
    <view v-else>
      <Empty />
    </view>
    <CuFilter ref="taskCuFilter" :showArr="taskFilterShowArr" navigationStyle="custom" @submit="taskFilterSubmit" />
    <CuFilter ref="recordCuFilter" :showArr="recordFilterShowArr" navigationStyle="custom" @submit="recordFilterSubmit" />
  </view>
</template>

<script>
import { myTaskGroupByRiskUnit, getRecordList } from '@/api/dbd/controlCheck.js'
import Empty from '@/components/cu-empty/index.vue'
import TopBar from '@/components/top-bar/index.vue'
import RiskTask from './components/riskTask.vue'
import Record from './components/record.vue'
import CuFilter from '@/components/cu-filter/cu-filter.vue'

import dayjs from 'dayjs'
import UNavbar from '@/uni_modules/uview-ui/components/u-navbar/u-navbar.vue'

export default {
  components: {
    UNavbar,
    Empty,
    TopBar,
    RiskTask,
    Record,
    CuFilter
  },
  computed: {
    currentTabComponent() {
      return this.tabBars.find((item) => item.index === this.tabIndex).componentName
    }
  },

  data() {
    return {
      textColor: true,
      listData: [],
      pageNum: 1,
      total: null,

      tabBars: [
        {
          name: '排查任务',
          componentName: 'RiskTask',
          index: 0
        },
        {
          name: '排查记录',
          componentName: 'Record',
          index: 1
        }
      ],
      tabIndex: 0,
      taskFilterShowArr: ['periodUnit', 'riskLevel', 'selectTime'],
      taskSearchParams: undefined,
      recordFilterShowArr: ['periodUnit', 'riskLevel', 'checkStatus', 'selectTime'],
      recordSearchParams: undefined
    }
  },
  onShow() {
    this.initData()
  },
  onPullDownRefresh() {
    this.initData()
  },
  onReachBottom() {
    this.pageNum++
    this.getlist()
  },
  onTabItemTap(e) {
    this.initData()
  },
  methods: {
    handleNavigationBarButtonTap() {
      if (this.tabIndex === 1) {
        this.$refs.recordCuFilter.toggle()
      }
    },
    taskFilterSubmit(val) {
      this.pageNum = 1
      this.total = null
      this.taskSearchParams = {}
      if (val.periodUnit) this.taskSearchParams.periodUnit = val.periodUnit
      if (val.riskLevel) this.taskSearchParams.controlRiskLevel = val.riskLevel
      if (val.date[0]) this.taskSearchParams.planCheckStartDateFrom = dayjs(val.date[0]).format('YYYY-MM-DD')
      if (val.date[1]) this.taskSearchParams.planCheckStartDateTo = dayjs(val.date[1]).format('YYYY-MM-DD')
      this.getlist()
    },
    recordFilterSubmit(val) {
      this.pageNum = 1
      this.total = null
      this.recordSearchParams = {}
      if (val.periodUnit) this.recordSearchParams.periodUnit = val.periodUnit
      if (val.riskLevel) this.recordSearchParams.controlRiskLevel = val.riskLevel
      if (val.checkStatus) this.recordSearchParams.checkStatus = val.checkStatus
      if (val.date[0]) this.recordSearchParams.planCheckStartDateFrom = dayjs(val.date[0]).format('YYYY-MM-DD')
      if (val.date[1]) this.recordSearchParams.planCheckStartDateTo = dayjs(val.date[1]).format('YYYY-MM-DD')
      this.getlist()
    },
    onTabChange(obj) {
      if (this.tabIndex === obj.index) {
        return
      }
      this.tabIndex = obj.index
      this.listData = []
      this.initData()
    },
    styleSelector(option) {
      return 'level_' + option
    },
    initData() {
      this.pageNum = 1
      this.total = null
      this.getlist()
    },
    getlist() {
      if (this.tabIndex == 0) {
        myTaskGroupByRiskUnit().then((res) => {
          this.listData = res.data
          uni.stopPullDownRefresh()
        })
      } else {
        if (!this.total || this.total > this.listData.length) {
          getRecordList({
            pageNum: this.pageNum,
            // checkStatus: 1,
            checkStatus: 1,
            ...this.recordSearchParams
          }).then((res) => {
            if (this.pageNum === 1) {
              this.listData = res.rows
            } else {
              this.listData.push(...res.rows)
            }
            this.total = res.total
            uni.stopPullDownRefresh()
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    position: relative;

    .task-status {
      position: absolute;
      top: 10rpx;
      right: 0;

      .icon-style {
        width: 100rpx;
        height: 88rpx;
      }
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      width: 62%;
      color: #333;
      display: inline-block;
    }

    .bg-select {
      display: inline-block;
      margin-left: 5px;

      i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
      }

      &.level_1 {
        color: #a14430;
      }

      &.level_2 {
        color: #c87c32;
      }

      &.level_3 {
        color: #c4c088;
      }

      &.level_4 {
        color: #88b4c4;
      }
    }

    .text-right {
      width: 76%;
      text-align: left;
      // height: 76rpx;
      overflow: hidden;
    }

    .text-right1 {
      width: 68%;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .deal-btn {
    width: 22vw;
  }

  .report-btn {
    width: 36vw;
  }

  .bor-top {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
